<template>
  <el-card shadow="never">
    <!-- 头部 -->
    <div slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体内容 -->
    <!-- 表格区域 -->
    <div class="filter-form">
      <el-input v-model="params.query"
                size="small"
                clearable
                @clear="getUserList"
                class="ipt">
        <template slot="append"><i @click="getUserList"
             class="el-icon-search"></i></template>
      </el-input>
      <el-button @click="isAddShow=true"
                 type="primary"
                 size="small"
                 icon="el-icon-plus">增加</el-button>
    </div>
    <!-- 表格 -->
    <!-- data 属性表示 表格的列表数据 -->
    <!-- label 属性表示 每列的文字信息 -->
    <!-- prop 属性表示 每列对应的字段数据名 -->
    <!-- type 有了type就可以不需要prop， index 表示序号列、 selection 表示勾选列 -->
    <el-table :data="list"
              border>
      <el-table-column label="序号"
                       width="100"
                       type="index"></el-table-column>
      <el-table-column label="用户名"
                       align="center"
                       prop="username"></el-table-column>
      <el-table-column label="邮箱"
                       prop="email"></el-table-column>
      <el-table-column label="手机号"
                       prop="mobile"></el-table-column>
      <el-table-column label="状态"
                       align="center">
        <template slot-scope="scope">
          <!-- scope.row 表示这一行的数据信息 -->
          <el-switch v-model="scope.row.mg_state"
                     @change="changeStatus(scope.row.id,$event)">
            <!-- scope.row.id 是用户ID，$event是开关的最新状态 -->
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.create_time | formate('YYYY/MM/DD')  }}
        </template>
      </el-table-column>
      <el-table-column label="角色名称"
                       prop="role_name"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)"
                     size="small"
                     type="success"
                     icon="el-icon-edit"
                     circle></el-button>
          <el-button @click="del(scope.row)"
                     size="small"
                     type="danger"
                     icon="el-icon-delete"
                     circle></el-button>
          <el-button @click="auth(scope.row)"
                     size="small"
                     type="warning"
                     icon="el-icon-setting"
                     circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- page-size属性表示 每页个数 -->
    <!-- total 属性表示 总条数 -->
    <!-- current-page 属性表示 当前页码数 -->
    <el-pagination background
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   :page-size="params.pagesize"
                   :current-page="params.pagenum"
                   layout=' sizes,prev, pager, next,->, total'
                   :page-sizes="[1,2,3,4,5]"
                   :total="total">
    </el-pagination>

    <!-- 增加弹框 -->
    <el-dialog title="增加"
               :visible.sync="isAddShow"
               width="36%"
               @close="$refs.addFormInfo.resetFields()">
      <!-- 表单 -->
      <el-form :model="addFormInfo"
               ref="addFormInfo"
               :rules="addFormRules"
               label-width="100px"
               :inline="false"
               size="normal">
        <el-form-item label="用户名"
                      prop="username">
          <el-input placeholder="请输入用户名"
                    v-model="addFormInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input placeholder="请输入密码"
                    show-password
                    v-model="addFormInfo.password"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      prop="email">
          <el-input placeholder="请输入邮箱"
                    v-model="addFormInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input placeholder="请输入手机号"
                    v-model="addFormInfo.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 弹框脚 -->
      <span slot="footer">
        <el-button @click="isAddShow = false">取消</el-button>
        <el-button type="primary"
                   @click="addSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog title="修改"
               :visible.sync="isEditShow"
               width="36%"
               @close="$refs.editFormInfo.resetFields()">
      <!-- 表单 -->
      <el-form :model="editFormInfo"
               ref="editFormInfo"
               :rules="editFormRules"
               label-width="100px"
               :inline="false"
               size="normal">
        <el-form-item label="邮箱"
                      prop="email">
          <el-input placeholder="请输入邮箱"
                    v-model="editFormInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      prop="mobile">
          <el-input placeholder="请输入手机号"
                    v-model="editFormInfo.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 弹框脚 -->
      <span slot="footer">
        <el-button @click="isEditShow = false">取消</el-button>
        <el-button type="primary"
                   @click="editSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 用户授权角色 -->
    <el-dialog title="用户授权角色"
               :visible.sync="isAuthShow"
               width="30%">
      <p>用户昵称：{{ authUserInfo.username }}</p> <br>
      <p>用户角色：{{ authUserInfo.role_name }}</p><br>
      <p>授权角色：{{rid}}
        <el-select v-model="rid">
          <el-option v-for="item in rolelist"
                     :key="item.id"
                     :label="item.roleName"
                     :value="item.id">
          </el-option>
        </el-select>

      </p>
      <span slot="footer">
        <el-button @click="isAuthShow = false">Cancel</el-button>
        <el-button type="primary"
                   @click="userAuthSubmit">OK</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>
// 自定义校验函数
const checkMobile = (rule, value, callback) => {
  const reg = /^1[3|4|5|6|7|8|9]\d{9}$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('手机格式不正确'))
  }
}
export default {
  name:'User',
  data () {
    return {
      list: [], // 列表数据
      params:{
        query:'', // 查询参数
        pagenum:1, // 页码
        pagesize:4 // 每页数量
      },
      total:0, // 总数
      isAddShow:false, // 增加弹框控制
      addFormInfo:{ // 添加表单
        username:'',
        password:'',
        email:'',
        mobile:''
      },
      addFormRules:{ // 添加表单验证对象
        username:[{ required:true, message:'用户名不为空', trigger:'blur' }],
        password:[{ required:true, message:'密码不为空', trigger:'blur' }],
        email:[{ type:'email', message:'邮箱格式不正确', trigger:'blur' }],
        // 自定义校验规则
        mobile:[{ validator: checkMobile, trigger: 'blur' }]
      },
      isEditShow:false, // 修改弹框控制
      editFormInfo:{
        email:'',
        mobile:''
      },
      editFormRules:{
        email:[{ type:'email', message:'邮箱格式不正确', trigger:'blur' }],
        // 自定义校验规则
        mobile:[{ validator: checkMobile, trigger: 'blur' }]
      },
      isAuthShow:false, // 授权角色
      authUserInfo:{}, // 用于回显
      rolelist:[], // 所有角色
      rid:''
    }
  },
  created () {
    this.getUserList()
    this.getRolesList()
  },
  methods: {
    // 获取角色列表
    async getRolesList () {
      const { data:res } = await this.$axios.get('/roles')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.rolelist = res.data
    },
    // 获取用户列表
    async getUserList () {
      // 1.请求
      const { data:res } = await this.$axios.get('/users', {
        params:this.params
      })
      // 2.失败处理
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 3.成功处理
      this.list = res.data.users
      this.total = res.data.total
    },
    // 修改状态
    async changeStatus (uid, state) {
      const { data:res } = await this.$axios.put(`/users/${uid}/state/${state}`)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success('修改状态成功')
    },
    // 页码变化
    currentChange (val) { // val是最新页码
      this.params.pagenum = val
      this.getUserList()
    },
    // 每页数量变化
    sizeChange (val) { // val是最新的每页数量
      this.params.pagesize = val
      this.getUserList()
    },
    // 添加提交
    addSubmit () {
      // 验证
      this.$refs.addFormInfo.validate(async valid => {
        // 不通过跳出
        if (!valid) return
        // 发请求
        const { data:res } = await this.$axios.post('/users', this.addFormInfo)
        // 失败处理
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        // 成功处理、提示弹框、拉列表、关闭对话框
        this.$message.success('增加成功')
        this.getUserList()
        this.isAddShow = false
      })
    },
    // 修改
    edit (val) {
      this.editFormInfo = val // 回显数据
      this.isEditShow = true // 打开修改弹框
    },
    // 修改提交
    editSubmit () {
      this.$refs.editFormInfo.validate(async valid => {
        if (!valid) return false
        const id = this.editFormInfo.id
        const { data:res } = await this.$axios.put('/users/' + id, this.editFormInfo)
        // 失败处理
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        // 成功处理、提示弹框、拉列表、关闭对话框
        this.$message.success('修改成功')
        this.getUserList()
        this.isEditShow = false
      })
    },
    async del (val) {
      try {
        // 确认弹框组件，返回promise
        await this.$confirm(`确定删除${val.username}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const { data:res } = await this.$axios.delete('/users/' + val.id)
        // 失败处理
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        // 成功处理、提示弹框、拉列表、
        this.$message.success('删除成功')
        // 判断不是第1页，且该页只有1条数据了，就要页码退1拉取列表
        if (this.params.pagenum !== 1 && this.list.length === 1) {
          this.params.pagenum--
        }
        this.getUserList()
      } catch (error) {
        console.log(error)
        this.$message.info('取消删除')
      }
    },
    // 角色授权事件
    auth (val) {
      this.authUserInfo = val
      this.isAuthShow = true
    },
    // 用户关联角色授权提交
    async userAuthSubmit () {
      const { data:res } = await this.$axios.put(`/users/${this.authUserInfo.id}/role`, {
        rid:this.rid
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.authUserInfo = {}
      this.rid = ''
      this.isAuthShow = false
      this.getUserList()
    }
  }
}

// 1.修改按钮绑定事件 （传递这一行的数据或者这一行数据的ID）
// 2.按钮绑定事件内
// 传这一行的数据就要将这一行的数据设置给data里面的变量，用于表单回显数据
// 传这一行数据的ID， 根据ID发送请求或者这一行的完成数据，用于表单回显
// 修改的弹框、表单 （editFormInfo,isEditShow）
// 3.修改提交事件
// 知道修改ID，修改哪些内容   ， 提交成功  关闭弹框、提示成功、拉取列表

</script>
<style >
</style>
